<template>
	<div class="page-content">
		<div class="adjustmentType">
			<el-radio v-model="adjustmentType" :label="2">
				等差递减
				<el-tooltip class="item" effect="dark" placement="top">
					<div slot="content">
						比例调高，下级比例不变；
						<br />
						比例调低，下级所有代理及会员比例减少相应差值，最低减至0.001；
						<br />
						比例归零，下级所有代理及会员比例归零；
					</div>
					<span><i class="el-icon-question"></i></span>
				</el-tooltip>
			</el-radio>
			<el-radio v-model="adjustmentType" :label="3">
				向上持平
				<el-tooltip class="item" effect="dark" placement="top">
					<div slot="content">
						下级比例低于上级时，下级比例不变；
						<br />
						下级比例高于上级时，调整为与上级持平；
					</div>
					<span><i class="el-icon-question"></i></span>
				</el-tooltip>
			</el-radio>
			<el-radio v-model="adjustmentType" :label="1">
				全部失效
				<el-tooltip class="item" effect="dark" placement="top">
					<div slot="content">
						下级所有代理及会员返点比例全部失效
					</div>
					<span class=""><i class="el-icon-question"></i></span>
				</el-tooltip>
			</el-radio>
		</div>
		<div class="page-ownpoint">
			<div class="tree-content" :class="{hideProxy: commissionModel === 2}">
				<CommonProxyTree
					ref="proxyTree"
					:selectedData.sync="selectedData"
					:detailData="detailData"
					:commissionModel="commissionModel"
				/>
			</div>
			<div
				class="table-content AgentPointSetAllSub-table"
				v-loading="loading"
			>

				
				<div class="table-items" v-if="tableData.length > 0">
					<p style="margin-bottom: 10px; margin-left: 10px;">账号类型：{{selectedData.type === 1 ? '代理': '会员'  }}</p>
					<el-table :data="tableData" style="width: 100%">
						<el-table-column
							prop="label"
							label="名称"
						></el-table-column>
						<el-table-column
							prop="rebate"
							label="当前比例"
						></el-table-column>
						<el-table-column
							prop="rebateAfter"
							label="修改后比例"
						></el-table-column>
					</el-table>
				</div>
				<el-empty v-else description="暂无数据" />
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import CommonProxyTree from '@/components/CommonProxyTree/index'

export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'ownPoint',
	components: {
		CommonProxyTree
	},
	mixins: [list],
	props: {
		agentData: {
			type: Object,
			default: () => ({})
		},
		agentPoint: {
			type: Object,
			default: () => ({})
		},
		commissionModel: {
            type: Number,
        }
	},
	data() {
		return {
			loading: false,
			selectedData: {
				type: 1,
				userName: undefined,
				id: ''
			},
			userType: 1,
			adjustmentType: 2,
			
		
			tableData: []
		}
	},
	computed: {
		detailData() {
			return {
				proxyId: this.agentData.id,
				merchantId: this.agentData.merchantId,
				proxyName: this.agentData.topProxyName
			}
		},
		columns() {
			if (this.commissionModel === 1) {
				return [
					{
						label: '俱乐部分成比例',
						prop: 'texasRebate'
					},
					{
						label: '德州保险分成比例',
						prop: 'texasInsuranceRebate'
					},
					{
						label: '增值服务分成比例',
						prop: 'valueAddedServiceRebate'
					},
					{
						label: '真人团队返点比例',
						prop: 'actualPersonRebate'
					},
					{
						label: '体育团队返点比例',
						prop: 'sportsRebate'
					},
					{
						label: '彩票团队返点比例',
						prop: 'lotteryTicketRebate'
					},
					{
						label: '棋牌团队返点比例',
						prop: 'chessRebate'
					},
					{
						label: '电子团队返点比例',
						prop: 'electronicRebate'
					},
					{
						label: '电竞团队返点比例',
						prop: 'esportsRebate'
					},
					{
						label: '真人团队占成比例',
						prop: 'actualPersonZhancheng'
					},
					{
						label: '体育团队占成比例',
						prop: 'sportsZhancheng'
					},
					{
						label: '彩票团队占成比例',
						prop: 'lotteryTicketZhancheng'
					},
					{
						label: '棋牌团队占成比例',
						prop: 'chessZhancheng'
					},
					{
						label: '电竞团队占成比例',
						prop: 'esportsZhancheng'
					},
					{
						label: '电子团队占成比例',
						prop: 'electronicZhancheng'
					}
				]
			} else {
				if (this.selectedData.type === 1) {
					return  [
						{
							label: '俱乐部分成比例',
							prop: 'texasCommission'
						},
						{
							label: '保险分成比例',
							prop: 'texasInsuranceCommission'
						},
						{
							label: '增值服务分成比例',
							prop: 'valueAddedServiceCommission'
						},
						{
							label: '团队佣金比例',
							prop: 'otherCommission'
						},
					]
					
				}

				return [
						{
							label: '俱乐部返水比例',
							prop: 'texasRebate'
						},
					]
			}
		
		
		}
	},
	watch: {
		async selectedData(data) {
			this.currentTreeItem(data)
			setTimeout(() => {
				this.loadData()
			}, 100)
		},
		adjustmentType(val) {
			this.loadData({
				adjustmentType: val
			})
		}
	},
	methods: {
		formatPoint(val, isAfter) {
			if (!val && val !== 0) return '/'

			// 已失效
			if (this.adjustmentType === 1 && isAfter) {
				// 总代
				if (
					this.selectedData.id === this.detailData.proxyId &&
					this.selectedData.type === 1
				) {
					return `${val}%`
				} else {
					return '/'
				}
			}

			return `${val}%`
		},
		currentTreeItem(selectedData) {
			if (selectedData.type === 1) {
				this.$refs.proxyTree.setCurrentProxy(selectedData.userName)
			} else {
				this.$refs.proxyTree.setCurrentMember(selectedData.userName)
			}
		},
		reset() {
			Object.keys(this.form).forEach((key) => {
				this.form[key] = ''
			})
			this.agentData = {}
		},
		async formatParams(parms) {
			const pointObj = {}
			if (this.commissionModel === 1) {
				this.columns.forEach(({ prop }) => {
					pointObj[prop] = this.agentPoint[prop]
				})
			} else {
				Object.assign(pointObj, this.agentPoint)
			}
			

			return {
				adjustmentType: this.adjustmentType,
				merchantId: this.agentData.merchantId,
				userId: this.selectedData.id,
				userName: this.selectedData.userName,
				topProxyId: this.detailData.proxyId,
				...parms,
				...pointObj,
				userType: this.selectedData.type === 1 ? 1 : 0
			}
		},
		// 处理api
		async loadData() {
			const params = await this.formatParams()
			this.loading = true
			await this.$nextTick()
			if (!params.userId) return
			try {
				const ret = await this.$api[
					this.commissionModel === 1 ? 'platformAdjustmentTryCacl' : 'commissionRatePlatformAdjustmentTryCacl'
				](params)

				if (ret.code === 200) {
					const rows = ret.data || []
					if (rows.length > 0) {
						if (
							this.selectedData.id === this.detailData.proxyId &&
							this.selectedData.type === 1
						) {
							this.columns.forEach(({ prop }) => {
								rows[0][`${prop}After`] = this.agentPoint[prop]
							})
						}
					
					}
					const data = rows[0] 
					if (data) {
						this.tableData = this.columns.map((col) => {
							const { label, prop } = col

							let _lable = label

							// 处理会员返水
							if(params.userType === 0) {
								_lable = label.replace('分成', '返水').replace('返点', '返水')
							}	

							return {
								label: _lable,
								rebate: this.formatPoint(data[prop]),
								rebateAfter: this.formatPoint(data[`${prop}After`])
							}
						}).filter(({ label }) => {
							if(params.userType === 0 && label.indexOf('占成') > -1) {
								return false
							}
							return true
						})
					} else {
						this.tableData = []
					}
					
				}
			} catch (err) {
				throw err
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

<style scoped lang="scss">
.adjustmentType .el-icon-question:after {
	font-size: 17px;
	color: rgba(0, 0, 0, 0.7);
}
::v-deep .AgentPointSetAllSub-table .el-table .el-table__cell {
	padding: 0;
}

.AgentPointSetAllSub-table {
	border-left: 1px solid #ccc;
}
.adjustmentType {
	margin-bottom: 15px;
}
.page-ownpoint {
	display: flex;
	padding: 10px;
	box-shadow: 0 2px 7px #ccc;
	height: 53vh;
}

.tree-content {
	width: 330px;
	margin-right: 25px;
	height: 51vh;
	overflow: auto;
}
.page-list {
	max-height: 53vh;
}

.table-item {
	margin-bottom: 20px;
}
.table-content {
	flex: 1;
	display: flex;
	justify-content: center;
	margin-bottom: 150px;
	overflow: auto;
	height: 100%;
}
.table-items {
	flex: 1;
	max-height: 65vh;
	overflow-y: auto;
	overflow-x: auto;
}
::v-deep .game-container .content {
	padding: 0;
}
::v-deep .hideProxy .is-leaf{
	display: none;
}
</style>
